<script>
export default {
  name: "HoverGlass",
}
</script>

<template>
  <div class="main">
    <div class="container">
      <div class="glass" style="--r: -15" data-text="Design">
        <i class="el-icon-apple"></i>
      </div>
      <div class="glass" style="--r: 5" data-text="Code">
        <i class="el-icon-apple"></i>
      </div>
      <div class="glass" style="--r: 25" data-text="Launch">
        <i class="el-icon-apple"></i>
      </div>
      <div class="glass" style="--r: -15" data-text="Earn">
        <i class="el-icon-apple"></i>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #0f222f;

  .container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .glass {
      position: relative;
      width: 200px;
      height: 240px;
      background: linear-gradient(#fff2, transparent);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 25px 25px rgba(0, 0, 0, 25%);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.5s;
      border-radius: 10px;
      margin: 0 -45px;
      transform: rotate(calc(var(--r) * 1deg));

      i {
        font-size: 4em;
        color: #fff;
      }
    }

    .glass::before {
      content: attr(data-text);
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: rgba(255, 255, 255, 0.05);
    }
  }

  .container:hover {
    .glass {
      transform: rotate(0deg);
      margin: 0 20px;
    }
  }
}
</style>